<template>
    <view class="processing-container">
        <!-- 显示选择的图片 -->
        <view class="original-image">
            <image :src="originalImage" mode="aspectFit"></image>
			<!-- 开始处理按钮 -->
			<u-button @click="startProcessing" :loading="loading" type="primary" size="large" v-if='step==1'>开始处理</u-button>
			<u-button @click="startProcessing" type="primary" size="large" v-if='step==2'>重新处理</u-button>
        </view>
        <!-- 显示处理后的图片 -->
        <view class="processed-image">
            <image v-if="processedImage && step ==2"  :src="processedImage" mode="aspectFit"></image>
			<u-button type="primary" size="large" v-if='step==2'>处理结果</u-button>
        </view>
    </view>
</template>

<script>
import { repair, enhance } from '../../api/image.js'
export default {
    data() {
        return {
            originalImage: '',
            processedImage: '',
			step: 1,
			loading: false,
			title: '',
			operation: ''
        };
    },
    onLoad(options) {
		console.log(options);
        this.originalImage = options.imagePath;
		this.title = options.title || '图像修复'
		this.operation = options.key
		uni.setNavigationBarTitle({
			title: this.title
		});
    },
    methods: {
        async startProcessing() {
			this.step = 1;
			this.processedImage = '';
			// this.loading = true;
			// setTimeout(() => {
			// 	this.step = 2;
			// 	if(this.title === '图像修复')
			// 		this.processedImage = 'http://qiniu-image.akfang.cn/wx10191744447510_.pic.jpg'
			// 	else
			// 		this.processedImage = 'http://qiniu-image.akfang.cn/wx10351744447535_.pic.jpg'
			// 	this.loading = false;
			// }, 1000)
            try {
                // 创建 FormData 对象
                const formData = {
					img: this.originalImage,
					operation: this.operation
				};
    //             formData.append('img', this.originalImage);
				// formData.append('operation', this.operation)
                // 发送请求到后端处理图片
				let api = null;
                if(this.operation === 'repair') {
					api = repair;
				} else if(this.operation === 'enhance') {
					api = enhance;
				}
				console.log(api, formData);
				if(typeof api === 'function') {
					api(this.originalImage, formData).then(res=>{
						if(res.code === 200) {
							this.step = 2;
							this.processedImage = res.imgUrl;
						}
					})
				}	
            } catch (error) {
                console.error('图片处理失败:', error);
            }
        }
    }
};
</script>

<style lang="scss">
.processing-container {
	min-height: 100vh;
	height: 100vh;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
	justify-content: space-around;

    .original-image,
    .processed-image {
		box-sizing: border-box;
		padding: 20px 0;
        max-width: 100%;
		flex: 1;
	}
	
	.processed-image {
		padding-top: 0;
	}
    
}
</style>